<template>
	<div class="listbox" v-if="allDatas.length > 0" :style="pic && 'padding: 50px 0 10px 10px;background: url('+pic+') no-repeat;background-size:cover;'">
		<div v-if="type && allDatas.length > 1" class="type-div">
			<div v-for="(item, index) in allDatas" :key="index" class="type-item" :class="{current: typeIndex == index}" @click="changeType(index)">
				<div>{{item.name}}</div>
				<div class="desc" v-if="item.desc">{{item.desc}}</div>
			</div>
		</div>
		<div v-if="filter" class="sort-div">
			<div class="sort-item" :class="{current: allDatas[typeIndex].param.sort == 0}" @click="setSort(0)">
				默认
			</div>
			<div class="sort-item" :class="{current: allDatas[typeIndex].param.sort == 4}" @click="setSort(4)">
				热度
			</div>
			<div class="sort-item" :class="{current: allDatas[typeIndex].param.sort == 5 || allDatas[typeIndex].param.sort == 6}" @click="setSort(56)">
				<span>价格</span>
				<div class="sort-box">
					<span :class="{active: allDatas[typeIndex].param.sort == 5}" class="icon xiangshang"></span>
					<span :class="{active: allDatas[typeIndex].param.sort == 6}" class="icon xiangxia"></span>
				</div>
			</div>
			<span class="sort-mask icon tongji1" :style="allDatas[typeIndex].param.form && allDatas[typeIndex].param.form.length > 0 && 'color:#3e84e9;'" @click="showMask"></span>
		</div>
		<div class="list-box" :style="'height:'+allDatas[typeIndex].height+';'">
			<div v-for="(tabItem,tabIndex) in allDatas" :key="tabIndex" v-if="typeIndex == tabIndex">
				<div v-if="tabItem.list.length > 0" class="list-list" :style="'max-height:'+tabItem.height+';' + (tabItem.scroll && 'flex-wrap:wrap;display: flex;')" @scrolltolower="loadData">
					<div v-for="(item, index) in tabItem.list" :key="index" :style="('margin:'+margin+'%;width:'+(tabItem.row ? 100-margin : 50-(margin*2))+'%;') + (tabItem.scroll ? 'float: left;' : (tabItem.row ? 'width:90%;' : 'width:40%;'))" :class="tabItem.row ? 'list-one' : 'list-two'">
						<div class="top" v-if="item.data8">
							{{item.data8}}
						</div>
						<div :style="tabItem.row ? 'display: flex;' : ''">
							<div class="pic" v-if="item.data1 || item.data2">
								<img v-if="item.data1" :src="item.data1" mode="scaleToFill" lazy-load="true"/>
								<div class="status" v-if="item.data2">{{item.data2}}</div>
							</div>
							<div :class="(item.data1 || item.data2) ? 'right' : 'all'">
								<div class="info" v-if="item.data3 || item.data4">
									<div class="name" v-if="item.data3">{{item.data3}}</div>
									<div class="cate" v-if="item.data4">{{item.data4}}</div>
								</div>
								<div class="info" v-if="item.data5 || item.data6">
									<div class="money" v-if="item.data5">{{item.data5}}</div>
									<div class="hits" v-if="item.data6">{{item.data6}}</div>
								</div>
								<div class="info" v-if="item.data7">
									<div class="desc">{{item.data7}}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div v-else class="empty" :style="'height:'+allDatas[typeIndex].height+';'">
					<div class="icon hezi"></div>
					<div>暂无数据</div>
				</div>
			</div>
		</div>
		<div v-if="filter" class="filter-mask" :style="'top:'+(115+40)+'px;'" :class="mask ? 'show' : 'none'" @click="mask=!mask">
			<div class="filter-content" :class="mask ? 'show' : 'none'" @click.stop.prevent="{}" @touchmove.stop.prevent="{}">
				<div scroll-y class="filter-list">
					<FilterItem v-if="url=='product' && !datas[typeIndex].param.cate_id" v-model="allDatas[typeIndex].param" prop="cate_id" :datas="cates" title="产品类目"></FilterItem>
					<div v-for="(item,findex) in forms" :key="findex">
						<div v-if="item.type == 'select' || item.type == 'checkbox' || item.type == 'radio'">
							<FilterItem v-model="allDatas[typeIndex].param.form" :prop="item.field" :multiple="item.multiple" :datas="item.datas" :title="item.name"></FilterItem>
						</div>
						<div v-if="item.type == 'textarea' || item.type == 'input' || item.type == 'datetime'">
							<div class="list">
								<div class="name">{{item.name}}</div>
								<div class="item"><input type="text" v-model="allDatas[typeIndex].param.form[item.field]" :placeholder="'请输入'+item.name" /></div>
							</div>
						</div>
						<div v-if="item.type == 'tree'">
							<div class="list">
								<div class="name">{{item.name}}</div>
								<div class="item"><input type="text" v-model="allDatas[typeIndex].param.form[item.field]" :placeholder="'请输入'+item.name" /></div>
							</div>
						</div>
					</div>
					<div class="btn-list">
						<button class="btn-confirm" @click="mask=!mask;loadData('refresh')">确认</button>
						<button class="btn-cancel" @click="mask=!mask">取消</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import FilterItem from './filterItem'
export default {
	components: {
		FilterItem
	},
	props: {
		url : String,
		path : String,
		pic : String,
		type : {
			type : Boolean,
			default : false
		},
		filter : {
			type : Boolean,
			default : false
		},
		margin : {
			type : Number,
			default : 0
		},
		datas: Array
	},
	data() {
		return {
			cates: this.$global.config.cates,
			topHeight : 0,
			allDatas : [{param:{form:[]},height:0,list:[]}],
			typeIndex : 0,
			mask : false,
			scrollTop: 0,
			showField : ['data1','data2','data3','data4','data5','data6','data7','data8']
		}
	},
	watch:{
		'url'(){
			this.create()
		}
	},
	computed: {
		forms() {
			let form = []
			if (this.allDatas[this.typeIndex] && this.allDatas[this.typeIndex].param && this.allDatas[this.typeIndex].param.form_id > 0) {
				let paramForm = {}
				let formInfo = this.$global.getArrayById(this.$global.config.forms,this.allDatas[this.typeIndex].param.form_id,'data')
				formInfo.forEach(vv => {
					form.push(vv)
					if (vv.type == 'select' || vv.type == 'checkbox' || vv.type == 'radio') {
						paramForm[vv.field] = vv.multiple ? [] : 0
					} else if (vv.type == 'textarea' || vv.type == 'input' || vv.type == 'datetime') {
						paramForm[vv.field] = ''
					} else if (vv.type == 'tree') {
						paramForm[vv.field] = ''
					}
				})
				this.allDatas[this.typeIndex].param.form = Object.assign(paramForm, this.allDatas[this.typeIndex].param.form)
			}
			return form
		}
	},
	mounted() {
		this.create()
	},
	methods: {
		formatItem(item,field){
			if(item[field] != undefined){
				return item[field]
			}else{
				let data = ''
				if(field.indexOf('form->') != -1){
					let formfield = field.replace('form->','')
					if(this.forms && item.form){
						this.forms.forEach(v =>{
							if(v.field == formfield){
								if(v.type == 'select' || v.type == 'checkbox' || v.type == 'radio'){
									v.datas.forEach(vv=>{
										if (vv.id == item.form[formfield]){
											data = vv.name
										}
									})
								}else if(v.type == 'textarea' || v.type == 'input' || v.type == 'datetime'){
									data = item.form[formfield]
								}else if(v.type == 'tree'){
									data = item.form[formfield]
								}
							}
						})
					}
				}else if(field.indexOf('->') != -1){
					let arr = field.split('->')
					if(item[arr[0]]){
						if (Array.isArray(item[arr[0]])){
							data = item[arr[0]][0][arr[1]]
						}else{
							data = item[arr[0]][arr[1]]
						}
					}
				}
				return data
			}
		},
		create(){
			this.topHeight = 0
			this.$parent.$parent.list.forEach(v=>{
				if(v.sign == 'topBox'){
					this.topHeight += 40
				}
				if(v.sign == 'tabBar'){
					this.topHeight += 50
				}
			})
			if(this.type){
				this.topHeight += 41
			}
			if(this.filter){
				this.topHeight += 31
			}
			this.allDatas = JSON.parse(JSON.stringify(this.datas))
			this.allDatas.forEach(v=>{
				v.hasmore = true
				v.list = []
				v.form = []
				v.field = v.field || {}
				v.param = Object.assign({sort:2,form:{},page:0,pageSize:20,field:[]},v.param)
				v.sort = v.param.sort
				let height = 15
				height += v.field.data1 ? 100 : 0
				height += (v.field.data3 || v.field.data4) ? 24 : 0
				height += (v.field.data5 || v.field.data6) ? 24 : 0
				height += v.field.data7 ? 24 : 0
				height += v.field.data8 ? 24 : 0
				height = v.row ? 100 : height/2
				if(v.scroll){
					v.height = v.param.pageSize > 10 ? (667-this.topHeight)+'px' : v.param.pageSize*height + 'px'
				}else{
					v.height = height*2 + 'px'
				}
			})
			this.loadData('refresh')
		},
		showMask(){
			this.mask = !this.mask
			if(!this.allDatas[this.typeIndex].form && this.allDatas[this.typeIndex].param.form_id > 0){
				this.allDatas[this.typeIndex].form = []
				let form = {}
				let formInfo = this.$global.getArrayById(this.$global.config.forms,this.allDatas[this.typeIndex].param.form_id)
				formInfo.forEach(v =>{
					if(v.type == 'select' || v.type == 'checkbox' || v.type == 'radio'){
						form[v.field] = []
						this.allDatas[this.typeIndex].form.push(v)
					}
				})
				this.allDatas[this.typeIndex].param.form = form
				this.$set(this.allDatas,this.typeIndex,this.allDatas[this.typeIndex])
			}
		},
		filterInput(e){
			this.allDatas[this.typeIndex].param.form = e
			this.$set(this.allDatas,this.typeIndex,this.allDatas[this.typeIndex])
		},
		async loadData(action='add'){
			if(action == 'refresh'){
				this.allDatas[this.typeIndex].list = []
				this.allDatas[this.typeIndex].param.page = 0
				this.allDatas[this.typeIndex].hasmore = true
			}
			if(this.allDatas[this.typeIndex].hasmore && this.url){
				this.allDatas[this.typeIndex].param.page++
				let list = await this.$api('GET',this.url,this.allDatas[this.typeIndex].param,true)
				if(list.data && list.data.length > 0){
					list.data.forEach(v=>{
						let obj = v
						this.showField.forEach(key=>{
							if(this.allDatas[this.typeIndex].field[key]){
								obj[key] = (this.allDatas[this.typeIndex].prefix[key] || '') + this.formatItem(v,this.allDatas[this.typeIndex].field[key])
							}else{
								obj[key] = this.allDatas[this.typeIndex].prefix[key] || ''
							}
						})
						this.allDatas[this.typeIndex].list.push(obj)
					})
					if(!this.allDatas[this.typeIndex].load || list.data.length < this.allDatas[this.typeIndex].param.pageSize){
						this.allDatas[this.typeIndex].hasmore = false
					}
				}else{
					this.allDatas[this.typeIndex].hasmore = false
				}
			}
			this.$set(this.allDatas,this.typeIndex,this.allDatas[this.typeIndex])
		},
		changeType(e){
			this.typeIndex = e
			this.loadData('refresh')
		},
		setSort(sort){
			if(sort == 56){
				this.allDatas[this.typeIndex].param.sort = (this.allDatas[this.typeIndex].param.sort == 5 ? 6 : 5)
			}else{
				this.allDatas[this.typeIndex].param.sort = sort
			}
			this.loadData('refresh')
		}
	}
}
</script>

<style lang='less'>
	.listbox{
		.type-div{
			display: flex;
			height: 40px;
			background: #fff;
			border-bottom: 1px solid #eee;
			z-index: 1;
			.type-item{
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 13px;
				color: #303133;
				position: relative;
				margin: 0 2px;
				&.current{
					color: @primary-color;
					&:after{
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 100%;
						height: 0;
						border-bottom: 2px solid @primary-color;
					}
				}
				.desc{
					line-height: 12px;
					font-size: 10px;
					color: #909399;
				}
			}
		}
		.sort-div{
			display: flex;
			height: 30px;
			background: #fff;
			border-bottom: 1px solid #eee;
			z-index: 1;
			.sort-item{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				font-size: 13px;
				color: #303133;
				position: relative;
				&.current{
					color: @primary-color;
				}
			}
			.sort-box{
				display: flex;
				flex-direction: column;
				.icon{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 15px;
					height: 6px;
					margin-left: 2px;
					font-size: 8px;
					color: #888;
					&.active{
						color: @primary-color;
					}
				}
			}
			.sort-mask{
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 40px;
				position: relative;
				font-size: 15px;
				color: #555;
				&:after{
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					border-left: 1px solid #ddd;
					width: 0;
					height: 18px;
				}
			}
		}
		.list-box{
			width: 100%;
			background: #f3f3f3;
			.list-list{
				display: -webkit-box;
				white-space: nowrap;
				position: relative;
				overflow-x:hidden;
				&::-webkit-scrollbar {
					width: 5px;
					height: 5px;
					background: transparent;
				}
				&::-webkit-scrollbar-thumb {
					background: transparent;
					border-radius: 4px;
				}
				.top{
					display: block;
					width: 100%;
					height: 20px;
					font-size: 14px;
					background-color: #FFFFFF;
					border-bottom: 1px solid #eee;
					overflow: hidden;
					color: #666666;
				}
				.list-one{
					position: relative;
					background: #fff;
					width: 100%;
					padding: 1%;
					border-radius: 5px;
					border-bottom: 1px solid #eee;
					.pic{
						width: 120px;
						height: 80px;
						border-radius: 3px;
						border: 1px solid #F5F5F5;
						overflow: hidden;
						position: relative;
						img{
							width: 100%;
							height: 100%;
							opacity: 1;
						}
					}
					.name{
						line-height: 20px;
						font-size: 15px;
						color: #333;
						letter-spacing: 0;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: normal!important;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
					.cate{
						padding: 0 5px;
						background-color: red;
						height: 20px;
						line-height: 20px;
						background: @primary-color;
						font-size: 10px;
						color: #fff;
						border-radius: 10px 1px 10px 1px;
						white-space:nowrap;
					}
					.right {
						width: calc(100% - 120px);
					}
					.all {
						width: 100%;
					}
					.info{
						padding:0 10px;
						min-height: 20px;
						line-height: 20px;
						margin: 2px 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.status {
						position :absolute;
						bottom: 0;
						width: 100%;
						height: 20px;
						line-height: 20px;
						text-align: center;
						font-size: 12px;
						background: rgba(0,0,0,0.5);
						color: #fff;
					}
					.hits{
						font-size: 12px;
						color: @red-color;
					}
					.money{
						font-size: 16px;
						color: @primary-color;
						line-height: 1;
					}
					.desc{
						width: 100%;
						letter-spacing: 0;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-all;
						word-break:break-all;
						white-space: pre-wrap;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 15px;
						font-size: 12px;
						color: #909399;
					}
				}
				.list-two{
					position: relative;
					background: #fff;
					float: left;
					width: 48%;
					padding: 1%;
					border-radius: 5px;
					.pic{
						width: 100%;
						height: 100px;
						border-radius: 3px;
						overflow: hidden;
						position: relative;
						img{
							width: 100%;
							height: 100%;
							opacity: 1;
						}
					}
					.close{
						position: absolute;
						top : 5rpx;
						right : 10rpx;
						text-align: right;
						text{
							font-size: 20px;
						}
					}
					.name{
						font-size: 14px;
						color: #333;
						letter-spacing: 0;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						white-space: pre-wrap;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						line-height: 20px;
						font-size: 15px;
					}
					.cate{
						padding: 0 5px;
						background-color: red;
						height: 20px;
						line-height: 20px;
						background: @primary-color;
						font-size: 10px;
						color: #fff;
						border-radius: 10px 1px 10px 1px;
						white-space:nowrap;
					}
					.status {
						position :absolute;
						bottom: 0;
						width: 100%;
						height: 20px;
						line-height: 20px;
						text-align: center;
						font-size: 12px;
						background: rgba(0,0,0,0.5);
						color: #fff;
					}
					.hits{
						font-size: 12px;
						color: @red-color;
					}
					.info{
						min-height: 20px;
						line-height: 20px;
						margin: 2px 0;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.money{
						font-size: 16px;
						color: @primary-color;
					}
					.desc{
						width: 100%;
						letter-spacing: 0;
						display: -webkit-box;
						overflow: hidden;
						text-overflow: ellipsis;
						word-wrap: break-word;
						word-break:break-all;
						white-space: pre-wrap;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						line-height: 15px;
						font-size: 12px;
						color: #909399;
					}
				}
			}
		}
		.empty{
			width: 100%;
			text-align: center;
			display: flex;
			flex-direction:column;
			justify-content: center;
			align-items:center;
			font-size: 28px;
			color: #C0C4CC;
			.icon{
				font-size: 64px;
			}
		}
		.filter-mask{
			position: fixed;
			bottom: 78px;
			width: 371px;
			background: rgba(0,0,0,0.4);
			z-index: 2;
			opacity: 0;
			transition: 1s;
			.filter-content{
				max-width: 300px;
				height: 100%;
				background: #fff;
				float:right;
				transform: translateX(100%);
				transition: 1s;
			}
			&.none{
				display: none;
			}
			&.show{
				opacity: 1;
				.filter-content{
					transform: translateX(0);
				}
			}
			.filter-list{
				display: flex;
				flex-direction: column;
				overflow-x:hidden;
				height: 100%;
			}
			.btn-list{
				display: flex;
				justify-content: space-between;
			}
			.btn-confirm{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100px;
				height: 30px;
				margin: 25px 15px;
				font-size: 16px;
				color: #fff;
				background-color: @primary-color;
				border-radius: 5px;
				box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.4);
				border: 0;
			}
			.btn-cancel{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100px;
				height: 30px;
				margin: 25px 15px;
				font-size: 16px;
				color: #555;
				background-color: #eee;
				border-radius: 5px;
				border: 0;
				box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
			}
		}
	}
</style>